<template>
	<view class="page">
		<view class="main" :style="{'height': `calc(100vh - ${navigationHeight}px)`}">
			<scroll-com>
				<u-gap height="32rpx" bgColor="transparent"></u-gap>
				<view class="doctor-head-warpper">
				<!-- 	<view class="doctor-avatar">
						<image 
							src="https://imc2024-bucket.oss-cn-beijing.aliyuncs.com/doctor/authen/20240318161412565555296.png" 
							mode="aspectFill" class="avatar"
						></image>
					</view> -->
					<view class="doctor-info">
						<view class="doctor-name">
							<text class="clinic">{{hospitalName}}</text>
							<text class="name">{{name}}</text>
						</view>
						<view class="hospital-area"></view>
					</view>
				</view>
				<u-gap height="32rpx" bgColor="transparent"></u-gap>
				<view class="card-container">
					<view class="card-header-warpper">
						<view class="card-title">医护协助</view>
					</view>
					<view class="online-work-nav-container">
						<u-row>
							<u-col span="3">
								<view @click="onNavigateTo('/pages/consultation/add/add')" class="work-nav-item">
									<view class="icon">
										<image src="@/static/image/work_consultation_icon.svg" class="image"></image>
									</view>
									<text class="text">即时会诊</text>
								</view>
							</u-col>
							<u-col span="3">
								<view  @click="onNavigateTo('/pages/referral/add/add')" class="work-nav-item">
									<view class="icon">
										<image src="/static/image/work_refferal_icon.svg" class="image"></image>
									</view>
									<text class="text">转诊</text>
								</view>
							</u-col>
							<u-col span="3">
								<view  @click="onNavigateTo('/pages/followup/list/list')" class="work-nav-item">
									<view class="icon">
										<image src="/static/image/work_follwup_list_icon.svg" class="image"></image>
									</view>
									<text class="text">随访</text>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<u-gap height="32rpx" bgColor="transparent"></u-gap>
				<view class="card-container">
					<view class="card-header-warpper">
						<view class="card-title">协助查询</view>
					</view>
					<view class="online-work-nav-container">
						<u-row>
							<u-col span="3">
								<view @click="onNavigateTo('/pages/consultation/list/list')" class="work-nav-item">
									<view class="icon">
										<image src="@/static/image/work_consultation_search_icon.svg" class="image"></image>
									</view>
									<text class="text">会诊查询</text>
								</view>
							</u-col>
							<u-col span="3">
								<view @click="onNavigateTo('/pages/referral/list/list')" class="work-nav-item">
									<view class="icon">
										<image src="/static/image/work_refferal_search_icon.svg" class="image"></image>
									</view>
									<text class="text">转诊查询</text>
								</view>
							</u-col>
							<u-col span="3">
								<view @click="onNavigateTo('/pages/followup/history/history')" class="work-nav-item">
									<view class="icon">
										<image src="/static/image/work_follwup_history_icon.svg" class="image"></image>
									</view>
									<text class="text">随访历史</text>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<u-gap height="32rpx" bgColor="transparent"></u-gap>
				<view class="card-container" v-if="$userInfo.type==='calling'">
					<view class="card-header-warpper">
						<view class="card-title">会诊呼叫</view>
					</view>
					<view class="consultation-patient-container">
					<!-- 	<view class="patient-avatar">
							<image 
								src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ6KPvPED0eQyv4WZFMgIfN5BtbxflF405Pt2KE5ticXlH4iaicwU3LsdkTNCWoIEC2M0vMSg81NmJQA/132"
							class="avatar"></image>
						</view> -->
						<view class="patient-info" >
							<view class="patient-name">
								<text class="name">{{$userInfo.orgName}}-{{$userInfo.userName}}正在呼叫</text>
								<!-- <text class="text">男</text>
								<text class="text">42岁</text> -->
							</view>
							<!-- <u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down> -->
						</view>
						<view class="patient-more">
							
							<view class="more-link" @click="answer">
								<text class="text">接听</text>
								<u-icon name="arrow-right" color="#3c9cff" size="15px"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<u-gap height="32rpx" bgColor="transparent"></u-gap>
			</scroll-com>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import navigationBarCom from '@/components/navigation-bar-com/navigation-bar-com.vue'
	const app = getApp()
	export default {
		computed: {
			 ...mapState(['$userInfo']),
			 
		},
		onShow() {
			let doctorId = uni.getStorageSync('doctorId');
			if (!doctorId) {
				uni.switchTab({
					url: '/pages/login/login'
				})
			}
		},
		data() {
			return {
				name:uni.getStorageSync('doctorName'),
				hospitalName:uni.getStorageSync('hospitalName'),
				navigationHeight: '',
				selected: [{date: '2025-01-23', info: '值班'},{date: '2025-01-24', info: '值班'},{date: '2025-02-05', info: '值班'}],
				option:  {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['复诊量', '咨询量']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '复诊量',
							type: 'line',
							stack: '总量',
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '咨询量',
							type: 'line',
							stack: '总量',
							data: [220, 182, 191, 234, 290, 330, 310]
						}
					]
				}
			}
		},
		onLoad(){
			// this.$refs.chart.init(echarts, chart=> {
			// 	chart.setOption(this.option);
			// });
		},
		methods: {
			onInitNavigationBar(e){
				this.navigationHeight = e.bottom + 5
			},
			answer(){
				uni.navigateTo({
					url: '/pages/consultation/meeting/meeting?businessId=' + this.$userInfo.businessId
				})
			}
		},
		components: {
			navigationBarCom
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100vw;
	}
	.doctor-head-warpper{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		width: 686rpx;
		border-radius: 20rpx;
		background-image: url(@/static/image/docBackground.png);
		background-size: cover;
		.doctor-avatar{
			width: 55px;
			height: 55px;
			border: 2px solid #fff;
			border-radius: 100%;
			overflow: hidden;
			.avatar{
				width: 100%;
				height: 100%;
			}
		}
		.doctor-info{
			margin-left: 10rpx;
			.doctor-name{
				display: flex;
				flex-direction: column;
				align-items:center;
				.name{
					font-size: 15px;
					color: #fff;
					margin-top: 7px;
				}
					
				.clinic{
					font-size: 18px;
					color: #fff;
				}
			}
		}
	}
	
	.online-work-nav-container{
		.work-nav-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			.icon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 45px;
				height: 45px;
				border-radius: 10px;
				overflow: hidden;
				.image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.text{
				margin-top: 2px;
				font-size: $ft-size-sm;
				color: #333;
			}
		}
	}
	
	.consultation-patient-container{
		margin: 0 32rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background-color: $primary-light;
		border-radius: 10px;
		.patient-avatar{
			width: 50px;
			height: 50px;
			.avatar{
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.patient-info{
			flex: 1;
			margin-left: 5px;
			// height: 50px;
			.patient-name{
				margin-bottom: 5px;
				.name{
					font-size: $ft-size-base;
					font-weight: bold;
					color: #333;
				}
				.text{
					margin-left: 5px;
					font-size: $ft-size-base;
					color: #333;
				}
			}
			.patient-desc{
				margin-top: 5px;
				display: flex;
				.text{
					margin-right: 5px;
					font-size: $ft-size-sm;
					color: #999;
				}
			}
		}
		.patient-more{
			display: flex;
			align-items: flex-end;
			// height: 50px;
			.more-link{
				display: flex;
				align-items: center;
				.text{
					color: $primary;
					font-size: $ft-size-sm
				}
				.icon{
					color: $primary;
				}
			}
		}
	}
</style>